'use client'
import React, { useState } from 'react'
import { Space, Table, Tag, Button, Flex, Modal,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect, } from 'antd';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import Myform from "./myform"
import {
  WechatOutlined,
  SignatureOutlined,
  VerticalAlignTopOutlined,
  DeleteOutlined
} from '@ant-design/icons';

export default function page() {
  //切换高亮
  const onChange = (key: string) => {
    console.log(key);
  };
  //tab切换
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '全部订单',
    },
    {
      key: '2',
      label: '我的订单',
    },
    {
      key: '3',
      label: '下属订单',
    },
    {
      key: '4',
      label: '我协作的',
    },
    {
      key: '5',
      label: '下属协作',
    },
  ]
  //弹窗控制
  const [isModalOpen, setIsModalOpen] = useState(false);
  //标题
  let [title, setTitle] = useState('添加订单')
  //对象
  let [itemobj, setItemobj] = useState({})
  //打开弹窗
  const showModal = () => {
    setIsModalOpen(true);
  };
  //关闭弹窗
  const handleOk = () => {
    setIsModalOpen(false);
  };
  //关闭x
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //表格数据
  const [data, setData] = useState([
    {
      id: 1,
      key: 'DD20190324010001',
      name: '订单标题1',
      kehu: ' 深圳市亿恩科技有限公司1',
      Collor: '已通过',
      price: 10000,
      yprice: 10000,
      kprice: 10000,
    },
    {
      id: 2,
      key: 'DD20190324010001',
      name: '订单标题2',
      kehu: ' 深圳市亿恩科技有限公司2',
      Collor: '被否决',
      price: 50000,
      yprice: 90000,
      kprice: 20000,
    },
    {
      id: 3,
      key: 'DD20190324010001',
      name: '订单标题3',
      kehu: ' 深圳市亿恩科技有限公司3',
      Collor: '已撤销',
      price: 30000,
      yprice: 70000,
      kprice: 20000,
    },
    {
      id: 4,
      key: 'DD20190324010001',
      name: '订单标题4',
      kehu: ' 深圳市亿恩科技有限公司4',
      Collor: '待审批',
      price: 60000,
      yprice: "-",
      kprice: 20000,
    },
    {
      id: 5,
      key: 'DD20190324010001',
      name: '订单标题5',
      kehu: ' 深圳市亿恩科技有限公司5',
      Collor: '已通过',
      price: 50000,
      yprice: "-",
      kprice: 50000,
    },
    {
      id: 6,
      key: 'DD20190324010001',
      name: '订单标题6',
      kehu: ' 深圳市亿恩科技有限公司6',
      Collor: '未提交',
      price: 20000,
      yprice: 80000,
      kprice: 50000,
    },
    {
      id: 7,
      key: 'DD201903465401',
      name: '订单标题7',
      kehu: ' 深圳市亿恩科技有限公司7',
      Collor: '已通过',
      price: 10000,
      yprice: "-",
      kprice: 40000,
    },
    {
      id: 8,
      key: 'DD201903213213002',
      name: '订单标题8',
      kehu: ' 深圳市亿恩科技有限公司8',
      Collor: '已通过',
      price: 90000,
      yprice: 80000,
      kprice: 20000,
    }
  ])
  const [searchData, setSearchData] = useState(data);

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'key',
      sorter: {
        compare: (a: any, b: any) => a.key - b.key,
        multiple: 3,
      },
      render: (key: string) => {
        return <div>{key}</div>
      }
    },
    {
      title: '订单标题',
      dataIndex: 'name',
      sorter: {
        compare: (a: any, b: any) => a.name - b.name,
        multiple: 3,
      },
      render: (name: string) => {
        return <div style={{ color: '#1777FF' }}>{name}</div>
      }
    },
    {
      title: '关联客户',
      dataIndex: 'kehu',
      sorter: {
        compare: (a: any, b: any) => a.kehu - b.kehu,
        multiple: 3,
      },
      render: (kehu: string) => {
        return <div style={{ color: '#1777FF' }}>{kehu}</div>
      }
    },
    {
      title: '审批状态',
      dataIndex: 'Collor',
      sorter: {
        compare: (a: any, b: any) => a.Collor - b.Collor,
        multiple: 3,
      },
      render: (Collor: string) => {
        if (Collor == "已通过") {
          return <Tag color="green">{Collor}</Tag>
        } else if (Collor == "被否决") {
          return <Tag color="red">{Collor}</Tag>
        } else if (Collor == "已撤销") {
          return <Tag color="orange">{Collor}</Tag>
        } else if (Collor == "待审批") {
          return <Tag color="blue">{Collor}</Tag>
        } else if (Collor == '未提交') {
          return <Tag color="gray">{Collor}</Tag>
        }
      },
    },
    {
      title: '订单总金额',
      dataIndex: 'price',
      sorter: {
        compare: (a: any, b: any) => a.price - b.price,
      },
      render: (price: number) => {
        return <div>￥+{price}.00</div>
      }
    },
    {
      title: '已回款金额',
      dataIndex: 'yprice',
      sorter: {
        compare: (a: any, b: any) => a.yprice - b.yprice
      },
      render: (yprice: string | number) => {
        return <div>￥{yprice}.00</div>
      }
    },
    {
      title: '已开票金额',
      dataIndex: 'kprice',
      sorter: (a, b) => a.kprice - b.kprice, // 纯排序函数
      render: (kprice: string | number) => {
        return <div>￥{Number(kprice).toFixed(2)}</div> // 更好的金额显示
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            //跟进操作
            window.alert(`正在跟进订单编号为${record.key}的订单`)
            
          }}><WechatOutlined />跟进</a>
          <a onClick={() => {
            //编辑操作
            showModal()
            setTitle("编辑订单")
            setItemobj(record)
          }}><SignatureOutlined />编辑</a>
          <a onClick={() => {
            //置顶操作
            let newData = searchData.filter(item => item.id!== record.id)
            newData.unshift(record)
            setSearchData(newData)
          }}><VerticalAlignTopOutlined />置顶</a>
          <a onClick={() => {
            //删除操作
            setSearchData(searchData.filter((item) => item.id!== record.id));
          }}><DeleteOutlined />删除</a>
        </Space>
      )
    },
  ];
  // 处理表单提交数据
  const handleFormSubmit = (values) => {
    if (title === '添加订单') {
      const newItem = {
        id: Date.now(),
        key: values.key,
        name: values.name,
        kehu: values.kehu,
        Collor: values.Collor,
        price: parseInt(values.price),
        yprice: values.yprice === '-'? null : parseInt(values.yprice),
        kprice: parseInt(values.kprice),
      };
      setSearchData([...searchData, newItem]);
      setData([...data, newItem]);
    } else if (title === '编辑订单') {
      const updatedData = searchData.map(item => {
        if (item.id === itemobj.id) {
          return {
            ...item,
            key: values.key,
            name: values.name,
            kehu: values.kehu,
            Collor: values.Collor,
            price: parseInt(values.price),
            yprice: values.yprice === '-'? null : parseInt(values.yprice),
            kprice: parseInt(values.kprice),
          };
        }
        return item;
      });
      setSearchData(updatedData);
      const updatedOriginalData = data.map(item => {
        if (item.id === itemobj.id) {
          return {
            ...item,
            key: values.key,
            name: values.name,
            kehu: values.kehu,
            Collor: values.Collor,
            price: parseInt(values.price),
            yprice: values.yprice === '-'? null : parseInt(values.yprice),
            kprice: parseInt(values.kprice),
          };
        }
        return item;
      });
      setData(updatedOriginalData);
    }
    handleOk();
  };

  const handleSearch = (values) => {
    const { name, Collor } = values;
    let filteredData = data;
    if (name) {
      filteredData = filteredData.filter(item => item.name.includes(name));
    }
    if (Collor) {
      filteredData = filteredData.filter(item => item.Collor === Collor);
    }
    setSearchData(filteredData);
  };

  return (
    <div>
      {/* 搜索 */}
      <Form
        layout="inline"
        onFinish={handleSearch}
        style={{ maxWidth: 1500 }}
      >
        <Form.Item name="name">
          <Input placeholder='请输入订单标题' />
        </Form.Item>
        <Form.Item label="" name="Collor">
          <Select>
            <Select.Option value="已通过">已通过</Select.Option>
            <Select.Option value="被否决">被否决</Select.Option>
            <Select.Option value="已撤销">已撤销</Select.Option>
            <Select.Option value="待审批">待审批</Select.Option>
            <Select.Option value="未提交">未提交</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Button htmlType='submit'>搜索</Button>
        </Form.Item>
      </Form>
      {/* 弹窗 */}
      <Modal footer={null} title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Myform title={title} itemobj={itemobj} handleFormSubmit={handleFormSubmit} key={new Date().getTime()} />
      </Modal>
      <Tabs defaultActiveKey="1" tabBarGutter={100} size='large' inkBarColor="#ccc" items={items} onChange={onChange} />
      <div>
        <Flex gap="small" wrap>
          <Button color="primary" variant="solid" onClick={() => {
            //添加操作
            showModal()
            setTitle("添加订单")
            setItemobj({})
          }}>+添加</Button>
          <Button color="default" variant="outlined">导入</Button>
          <Button color="default" variant="outlined">导出</Button>
          <Button color="default" variant="outlined">转移订单</Button>
          <Button color="default" variant="outlined">添加协作</Button>
          <div style={{ position: "absolute", right: "800px" }}>
            <Space>
              <Button color="default" variant="outlined">排序</Button>
              <Button color="default" variant="outlined">列表</Button>
            </Space>
          </div>
        </Flex>
      </div>
      <Table
      rowKey="id"  // 确保每行数据有唯一id字段 
      style={{ height: '100vh', marginTop: '20px' }} pagination={{ pageSize: 50 }} size="small" bordered={true} columns={columns} dataSource={searchData} />
    </div>
  )
}
    